<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../admin/css/bootstrap.min.css">
    <!-- bootstrap 引入文件 -->
    <style>
        a{
            text-decoration: none;
            color: #212529;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container-fluid">
            <a class="navbar-brand" href="#" style="font-weight: bold;" >首页</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            主页
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="../admin/backstage.html">轮播</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">企业新闻 | 媒体关注</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">品牌产品</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            关于君乐宝
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">社会责任</a></li>
                             <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">发展历程</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            品牌产品
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">奶粉</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">酸奶</a></li>
                            <li>
                                <hr class="dropdown-divider">
                            </li>
                            <li><a class="dropdown-item" href="#">鲜奶</a></li>
                             <li>
                                 <hr class="dropdown-divider">
                             </li>
                             <li><a class="dropdown-item" href="#">液态奶</a></li>
                              <li>
                                  <hr class="dropdown-divider">
                              </li>
                              <li><a class="dropdown-item" href="#">其他</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            招标广告
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">广告栏</a></li>
                        </ul>
                    </li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button"
                            data-bs-toggle="dropdown" aria-expanded="false">
                            联系我们
                        </a>
                        <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <li><a class="dropdown-item" href="#">热线</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <button class="btn btn-outline-success" type="submit">
                        <img src="../admin/images/Sy.png">
                    </button>
                </form>
            </div>
        </div>
    </nav>

       <!-- 表单 -->
       <h3 class="text-center mt-5">
           君乐宝乳业
           <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#add" data-bs-dismiss="modal">
               添加
           </button> 
       </h3>
        
       <div class="bd-example">
           <table class="table">
               <thead>
                   <tr>
                       <th scope="col">id</th>
                       <th scope="col">路径</th>
                   </tr>
               </thead>
               <tbody>
                   <tr>
                       <th scope="row">Default</th>
                       <td>Cell</td>
                   </tr>

                   <tr class="table-secondary">
                       <th scope="row">Secondary</th>
                       <td>Cell</td>


                   </tr>
                   <tr class="table-success">
                       <th scope="row">Success</th>
                       <td>Cell</td>


                   </tr>
                   <tr class="table-danger">
                       <th scope="row">Danger</th>
                       <td>Cell</td>


                   </tr>
                   <tr class="table-dark">
                       <th scope="row">Dark</th>
                       <td>Cell</td>

                   </tr>
               </tbody>
           </table>
       </div>
       <!-- 修改模态框 -->
       <div class="modal fade" id="edit" tabindex="-1">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <h5 class="modal-title">Modal title</h5>
                       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   </div>
                   <div class="modal-body">
                       <form method="POST" action="/admin/editStudent" id="editForm" enctype="multipart/form-data">
                           <div class="mb-3">
                               <input type="hidden" class="form-control" id="date" name="id" />
                           </div>
                           <div class="mb-3">
                               <label for="file" class="form-label">图片</label>
                               <img src="" alt="" style="width: 100px" />
                               <input type="file" class="form-control" id="file" name="avatar" />
                           </div>
                           <div class="mb-3">
                               <label for="username" class="form-label">姓名</label>
                               <input type="text" class="form-control" id="username" name="username" />
                           </div>
                           <div class="mb-3">
                               <label for="school" class="form-label">学校</label>
                               <input type="text" class="form-control" id="school" name="school" />
                           </div>
                           <div class="mb-3">
                               <label for="company" class="form-label">公司 </label>
                               <input type="text" class="form-control" id="company" name="company" />
                           </div>
                           <div class="mb-3">
                               <label for="pay" class="form-label">薪资 </label>
                               <input type="text" class="form-control" id="pay" name="pay" />
                           </div>
                           <button type="submit" class="btn btn-primary" id="submit">
                               Submit
                           </button>
                       </form>
                   </div>
               </div>
           </div>
       </div>
       <!-- 增加模态框 -->
       <div class="modal fade" id="add" tabindex="-1">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <h5 class="modal-title">Modal title</h5>
                       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   </div>
                   <div class="modal-body">
                       <form method="POST" action="/admin/addStudent" enctype="multipart/form-data">

                           <div class="mb-3">
                               <label for="file" class="form-label">图片:</label>

                               <input type="file" class="form-control" id="file" name="avatar" />
                           </div>
                           <button type="submit" class="btn btn-primary" data-bs-dismiss="modal" id="submit">
                               提交
                           </button>
                       </form>
                   </div>
               </div>
           </div>
       </div>
       <!-- 删除模态框 -->
       <div class="modal fade" id="del" tabindex="-1">
           <div class="modal-dialog">
               <div class="modal-content">
                   <div class="modal-header">
                       <h5 class="modal-title">删除</h5>
                       <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                   </div>
                   <div class="modal-body">
                       <form method="POST" action="/admin/delStudent" id="delForm">
                           <div class="mb-3">
                               <input type="hidden" class="form-control" id="date" name="id" />
                           </div>
                           <h3>确定要删除吗？</h3>
                           <button type="submit" class="btn btn-primary" id="submit">
                               确定
                           </button>
                       </form>
                   </div>
               </div>
           </div>
       </div>
    <script src="../admin/js/bootstrap.min.js"></script>
    <!-- bootstrap 引入文件 -->
    <script src="../admin/js/jquery-3.2.1.min.js"></script>
    <script>
        //刷新页面
        $("#submit").click(function () {
        location.href = "/admin/backstage.html";
        });
        var quit = document.querySelector(".navbar-brand");
        quit.onclick = function () {
        localStorage.removeItem("users");
        location.href = "/admin";
        };
    </script>
</body>


</html>